<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ taglib prefix="mvc" uri="http://www.trkj.com/mvc/tags" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>订单详情页</title>
<link type="text/css" href="css/horder_detail.css" rel="stylesheet"></link>
<style type="text/css">
@CHARSET "UTF-8";
.dindan{
		height:40px;
		width:80px;
		text-align:center;
		line-height:40px;
		color:#555;
		background-color:#f0f0f0;
		font-size: 14px;
		font-weight: 700;
	}
	.dindanhezi{
		height:40px;
		width:900px;
		border-bottom:1px solid #f0f0f0;
		margin-bottom:10px;
		margin-left:330px;
		text-align:left;
	}
	.hezi{
				height:auto;
				width: 900px;
				margin-left:330px;
				background-color: #FEFAEE;			
			}
			.tape{
				height:auto;
				width:800px;
			}
			.xiangqing{
				height:auto;
				width:850px;
				border-top:dotted;
				border-top-color:#F5C53A;
				margin-left: 25px;
			}
			.type1{
				line-height: 50px;
				width: 100px;
				font-size: 12px;
			}
			.type2{
				width: 100px;
				font-size:12px;
			}
			.tape li{
				line-height: 30px;
				font-size: 14px;
				color:#BF910A;
			}
			.dindan1{
				height:40px;
				width:80px;
				text-align:center;
				line-height:40px;
				color:#555;
				background-color:#f0f0f0;
				font-size: 14px;
				font-weight: 700;
			}
			.dindanhezi1{
				height:40px;
				width:900px;
				border-bottom:1px solid #f0f0f0;
				margin-bottom:10px;
				margin-left:330px;
				text-align:left;
				margin-top: 20px;
			}
			.table2{
				width: 800px;
				border: 1px solid #ddd;
				border-collapse: collapse;
				margin-left:330px;
			}
			.td2{
				width: 120px;
				height: 35px;
				background-color: #FAFAFA;
				font-size: 12px;
				color: #555;
				margin-left:20px;
				text-align: right;
				padding-right: 10px;	
				
			}
			.dindan2{
				height:40px;
				width:120px;
				text-align:center;
				line-height:40px;
				color:#555;
				background-color:#f0f0f0;
				font-size: 14px;
				font-weight: 700;
			}
			.table3{
				text-align: center;
				font-size:14px;
				padding-left:10px;
				margin-left:290px;
			}
			.table3 tr{
				height:40px;
			}
			.table3  td{
				font-size:12px;
				color:#555;
			}
			.rechargeable{
				height:100px;
				width: 900px;
				background-color: #FAFAFA;
				margin-left:330px;
				margin-top:20px;
				font-size: 14px;
			}
			.rechargeable2{
				float: right;
				text-align: right;
				font-size: 14px;
				padding:5px;
			}
			.black{
				font-size: 12px;
				color:#BF910A;
			}
			.reslut{
				font-size:12px;
				padding-left:10px;
			}
			.type3{
				height:35px;
				width:70px;
				border:1px solid #F5AB48;
				background-color:#F5AB48;
				color:white;
				margin-left:20px;
				margin-bottom:10px;				
			}
			.goodspic{
				height:70px;
				width: 100px;
			}
			
			.horder_detailjsp{
			
		margin-top:50px;
			}
</style>
<script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
<script type="text/javascript">
$(function(){
	//删除操作
	$(".order_delete").click(function(){
		if(confirm("确认取消？")){
			var a=$(this);
			$.get("orders?action=cancel", {id:a.attr("id")}, function(){
				a.remove();
			});
		}
	});
	//付款操作
	$(".payment").click(function(){
		if(confirm("那就付款了哦")){
			var a=$(this);
			$.get("orders?action=payment",{id:a.attr("id")},function(){
				$(".order_delete").remove();
				a.remove();				
			});
		}
	});
	//总计
	var h1 = 0; //总计
	var h = 0; //
	$(".table3 tr").each(function(){  // 获取表格table中，第几个td的文本
		if(h==0){
			h++;
		}else{
			h1 +=  parseInt($(this).find("td:nth-child(7)").html());
		}		
	});
	//传值过去
	document.getElementById("zongji").innerText ="￥"+h1;
	//获取运费
	var yunfei=document.getElementById("yunfei").innerText;
	//计算应该支付的总金额
	var zong = parseInt(h1)+parseInt(yunfei);
	document.getElementById("zhifu").innerText ="￥"+zong;
	
	
})
</script>
</head>
<body>
<div ><%@include file="chead.jsp" %></div>
<div class="horder_detailjsp">
<div style="float:left"><%@include file="hppmenu.jsp" %></div>
<div class="dindanhezi">
	<div class="dindan">
		<span>订单详情</span>	
	</div>
</div>
<div class="hezi">
		<div class="tape">
			<ol>
				<li>
					${ord.getBuy_date()}&nbsp;&nbsp;<span class="black">订单创建</span>
				</li>
				<c:if test="${ord.getO_states() eq '已完成' }">
					<li>
						${ord.getO_date()}&nbsp;&nbsp;<span class="black">订单完成</span>
					</li>
				</c:if>

			</ol>
		</div>
		<div class="xiangqing">
			<strong class="type1">订单号：</strong>
			<span class="type2">${ord.getO_code()}</span>
			
			<strong class="type1">下单日期：</strong>
			<span class="type2">${ord.getBuy_date()}</span>
			
			<strong class="type1">状态：</strong>
			<span class="type2" style="color:#379339">${ord.getO_states()}</span><br/>
			
			<c:if test="${ord.getO_states() eq '已完成'}">
				<a href="orders?action=refunds&id=${ord.getO_code()}">
				<input class="type3" type="button" value="申请退款"/></a>
			</c:if>
			
			<c:if test="${ord.getO_states() eq '等待付款'}"> 
				<!-- 取消订单 -->
				<a id="${ord.getO_code()}" href="javascript:void(0);" class="order_delete">
				<input class="type3" type="button" value="取消订单"/></a>
				<!-- 立即付款 -->
				<a id="${ord.getO_code()}" href="javascript:void(0);" class="payment">
				<input class="type3" type="button" value="立即付款"/></a>
			</c:if>
			
			<c:if test="${ord.getO_states() eq '已发货'}">
				<!-- 确认收款 -->
				<a href="orders?action=receipt&id=${ord.getO_code()}">
				<input class="type3" type="button" value="确认收货"/></a>
				<!-- 申请退款 -->
				<a href="orders?action=refunds&id=${ord.getO_code()}">
				<input class="type3" type="button" value="申请退款"/></a>
			
			</c:if>
		</div>
	</div>
	<div class="dindanhezi1">
			<div class="dindan1">
			<span>收件人信息</span>	
		</div>
	</div>
	<table border="1px solid #ddd" class="table2" >
			<tr>
				<td class="td2">收货人：</td>
				<td class="reslut">${lst.getR_name() }</td>
			</tr>
			<tr>
				<td class="td2">地址：</td>
				<td class="reslut">${lst.getA_name() }&nbsp;&nbsp;${lst.getAddress() }</td>
			</tr>
			<tr>
				<td class="td2">邮编：</td>
				<td class="reslut">${lst.getZip_code() }</td>
			</tr>
			<tr>
				<td class="td2">固定电话：</td>
				<td class="reslut">${lst.getPhone() }</td>
			</tr>
			<tr>
				<td class="td2">手机号码：</td>
				<td class="reslut">${lst.getTel() }</td>
			</tr>
		</table>
		
		<div class="dindanhezi1">
			<div class="dindan2">
			<span>支付及配送方式</span>	
		</div>
	</div>
	<table border="1px solid #ddd" class="table2" >
			<tr>
				<td class="td2">支付方式：</td>
				<td class="reslut">${pay }</td>
			</tr>
			<tr>
				<td class="td2">配送方式：</td>
				<td class="reslut">${ship }</td>
			</tr>
			<tr>
				<td class="td2">运费：</td>
				<td class="reslut">${in.getFreight() }</td>
			</tr>
			<tr>
				<td class="td2">物流公司：</td>
				<td class="reslut">${ex.getE_name() }</td>
			</tr>
			<tr>
				<td class="td2">快递单号：</td>
				<td class="reslut">${in.getCourier_num() }</td>
			</tr>
		</table>
		<div class="dindanhezi1">
			<div class="dindan1">
			<span>商品清单</span>	
		</div>
	</div>
	<table class="table3"  width="900px" >
			<thead>
				<tr>
					<th>图片</th>
					<th>商品名称</th>
					<th>赠送积分</th>
					<th>商品价格</th>
					<th>优惠金额</th>
					<th>商品数量</th>
					<th>小计</th>
					<th>配送</th>
				</tr>
			</thead>
			<tbody>
				<c:forEach items="${list1 }" var="u" varStatus="vs">
					<tr>
						<td><img class="goodspic" src="${u.p_newname }"/></td>
						<td>${u.g_name }</td>
						<td>0</td>
						<td>${u.o_price }</td>
						<td>0</td>
						<td>x${u.g_num }</td>
						<td>${u.xiaoji }</td>
						<td>${u.g_name }</td>
					</tr>
				</c:forEach>
			</tbody>
		</table>
		
		<div class="rechargeable">
			<div class="rechargeable2">
				商品总金额：<span id="zongji"></span><br/>
				+运费：<span id="yunfei">${in.getFreight() }</span><br/>
				订单折扣或涨价：<span>￥0</span><br/>
				-促销优惠金额：<span>￥0</span><br/>
				订单支付金额：<span id="zhifu" style="color: #e71f19;"></span><br/>	
			</div>
		</div>
</div>		
	<div style="margin-top:100px;"><%@include file="cfooter.jsp" %></div>
</body>
</html>